import React, {PureComponent} from 'react';
import HeadNavBar from '../../components/HeadNavBar';
import {List, Drawer} from 'antd-mobile';
import {Link} from 'react-keeper';
import './index.less';

import sidebarMenu from '../../meun';
import SearchBar from './SearchBar';
import Category from './Category';
import GoodsList from './GoodsList';
import Carousel from 'Components/Carousel';
import Footer from 'Components/Footer';

import imageItem1 from 'Image/1.jpg';
import imageItem2 from 'Image/2.jpg';
import imageItem3 from 'Image/3.jpg';


const carouseData = [
  {
    id: 1,
    name: '',
    thumb: imageItem1,
    href: ''
  },
  {
    id: 2,
    name: '',
    thumb: imageItem2,
    href: ''
  },
  {
    id: 3,
    name: '',
    thumb: imageItem3,
    href: ''
  }
];

export default class Index extends PureComponent {
  state = {
    open: false, //侧边栏开关
    title: 'flyxiaozhu shop',
    mode: 'light',
    icon: '&#xe61c;'
  };

  /**
   * 侧边栏开关
   * @param args
   */
  onOpenChange = () => {
    this.setState({
      open: !this.state.open,
      icon: !this.state.open ? '&#xeb6a;' : '&#xe61c;'
    });
  };

  render() {
    // 侧边栏内容
    const sidebar = (
      <List>
        {sidebarMenu.map(item =>
          <List.Item
            className='drawer-list'
            key={item.key}
          >
            <Link to={item.route}>
              <i className='iconfont icon-user'><span dangerouslySetInnerHTML={{__html: item.icon}}/></i>
              {item.name}
              <i className='iconfont icon-float-right'>&#xe634;</i>
            </Link>
          </List.Item>
        )}
      </List>
    );

    return (
      <div>
        {/*头部导航栏*/}
        <HeadNavBar
          title={this.state.title}
          mode={this.state.mode}
          icon={this.state.icon}
          bindLeftClick={this.onOpenChange}
        />
        {/*首页侧边栏*/}
        <Drawer
          className='my-drawer'
          style={{minHeight: document.documentElement.clientHeight}}
          enableDragHandle
          contentStyle={{color: '#A6A6A6', textAlign: 'center', paddingTop: 42}}
          sidebar={sidebar}
          open={this.state.open}
          onOpenChange={this.onOpenChange}
        >
          <div className='body'>
            <div style={{height: 53}}/>
            {/*轮播图*/}
            <Carousel
              data={carouseData}
              autoplay={true}
              infinite={true}
            />
            {/*<SearchBar/>*/}
            {/*首页商品分类*/}
            <Category/>
            {/*首页商品列表*/}
            <GoodsList/>
            {/*底部信息*/}
            <Footer/>
          </div>
        </Drawer>
      </div>
    );
  }
}
